<template>
  <div id="search-contain">
    <van-search shape="round" placeholder="请输入搜索关键词" v-model.trim="keywords" @input="searchIpnut" />

    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="keywords === ''">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span class="hot_item">
          <van-tag round plain type="primary" size="large" color="red" text-color="#000" v-for="item in hotSearchList" :key="item.first" @click="clickItem(item.first)">
            {{ item.first }}
          </van-tag>
        </span>
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :error.sync="isError" error-text="亲！网络错误。请点击重试" :immediate-check="false" @load="onLoad">
        <music-item v-for="item in musicSearchList" :key="item.id" :item="item" :author="item.ar[0].name" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { getHotSearchAPI, getCloudSearchAPI } from '@/api/search.js'
import MusicItem from '@/components/MusicItem'

import { Toast } from 'vant'

export default {
  name: 'Search',
  data () {
    return {
      hotSearchList: [],
      keywords: '',
      limit: 20,
      offset: 0,
      page: 1,
      musicSearchList: [],
      loading: false,
      finished: false,
      isError: false,
      count: 0
    }
  },
  created () {
    this.getHotSearchList()
  },
  methods: {
    // 输入框改变时触发onload事件
    searchIpnut () {
      this.musicSearchList = []
      this.finished = false
      this.page = 1
      clearTimeout(this.id)
      if (this.keywords === '') return
      this.loading = true
      this.id = setTimeout(_ => {
        this.onLoad()
      }, 700)
    },
    async getHotSearchList () {
      try {
        const { data: res } = await getHotSearchAPI()
        // console.log(res)
        this.hotSearchList = res.result.hots
      } catch (error) {
        Toast.fail('热门词获取失败!')
      }
    },
    clickItem (val) {
      this.keywords = val
      this.searchIpnut()
    },
    async onLoad () {
      // 加载数据的情况this.loading=true
      /*  1、页面已进入：在可视区域显示了list列表
      2、onload加载后获取的数据展示到页面上没有沾满一屏
      3、即将触底的时候加载数据 */
      // 步骤：
      // 1、模拟请求数据
      try {
        const { data: res } = await getCloudSearchAPI({
          keywords: this.keywords,
          limit: this.limit,
          offset: (this.page - 1) * this.limit
        })
        // console.log(res)
        // 2、保存数据
        // 判断，如果有数据才会进行
        if (res.result.songs) {
          this.musicSearchList.push(...res.result.songs)
          this.count = res.result.songCount
          this.page++
        } else {
          this.count = 0
        }
      } catch (error) {
        // Toast.fail('搜索失败!')
        this.isError = true
      }
      // 3、加载状态结束
      this.loading = false
      // 4、数据全部加载完成的判断
      if (this.musicSearchList.length >= this.count) {
        this.finished = true
      }
    }
  },
  components: {
    MusicItem
  }
}
</script>

<style lang='less' scoped>
.search_wrap {
  padding: 0 20px;
  .hot_title {
    color: #ccc;
    font-size: 13px;
  }

  /deep/.van-tag {
    margin: 5px 4px;
  }
}
</style>
